<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            color:red;
            text-decoration: none;
        }
        .look{
            border:1px solid #000;
            width:500px;
            height: 500px;
            margin:0 auto;
        }
        .juzhong{
            width: 100%;
            text-align: center;
        }
        .input{
            border:1px solid skyblue;
            border-radius:7px;
            padding-left:15px;
            padding-right:15px;
            width: 70px;
        }
        .back{
            width: 100%;
            float:left;
        }
        .defaultdiv{
            width: 100%;
            float:left;
            margin-bottom:20px;
        }
        .liuyan{
            border:1px solid skyblue;
            border-radius:7px;
            width: 100%;
            float:left;
            outline:none;
            padding-left:15px;
            padding-right:15px;
            box-sizing: border-box;
        }
        .input {
            width:170px;
            border-radius: 8px;
            outline:none;
            height: 25px;
            margin-bottom: 10px;
            border:1px solid skyblue;
            padding-left:15px;
            padding-right:15px;
        }
        .tijiao{
            border-radius:7px;
            background-color: green;
            color:white;
            font-size:16px;
            width:80px;
            height: 40px;
            line-height:40px;
            border:none;
            cursor:pointer;
            outline:none;
            margin-bottom:20px;
        }
        .headphoto{
            float: left;
            width:100px;
            height: 100px;
            border-radius:50%;
        }

        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .abc{
            display: none;
        }
    </style>
</head>
<body>
<div class="look">

    <h2 class="juzhong"><img class="headphoto" src="" /><span class="username"></span>欢迎您</h2>
    <div class="juzhong">请填写个人信息</div>
        <div class="defaultdiv">
             性别:  男:<input class="sex" type="radio" name="sex" value="男">女:<input class="sex" type="radio" name="sex" value="女">
        </div>
        <div class="defaultdiv">
            爱好:  打篮球: <input type="checkbox" name="hobby" value="打篮球">
            游泳: <input type="checkbox" name="hobby" value="游泳">
            吃饭: <input type="checkbox" name="hobby" value="吃饭">
            睡觉: <input type="checkbox" name="hobby" value="睡觉">
            <div class="defaultdiv">
                重置密码: <input type="password" class="password input">
            </div>
            <div class="defaultdiv">
            年龄: <input type="text" class="age input"/>
            </div>
            <form action="http://127.0.0.1:3000/headphoto" method="post" enctype="multipart/form-data">
                <input class="inputusername" style="display:none" name="name">
                <a href="javascript:;" class="file">选择文件
                    <input type="file" name="tupian" id="">
                </a>
                <input type="submit" class="abc" value="提交"/>
            </form>
        </div>

    <div style="width:100%;float:left;margin-top:20px;">
        <button class="tijiao">提交</button>
    </div>

    <a href="http://127.0.0.1:3000/log" class="back">返回登陆页面</a>
</div>

</body>
<script src="jquery-1.11.1.js"></script>
<script>
    $(function(){
        $('.username').text(localStorage.getItem('name'))
        $('.inputusername').val(localStorage.getItem('name'))
        var username = $('.username').text();
        var data={
            name:username,
        }
        $.post('http://127.0.0.1:3000/stuload',data,function(data, textStatus, xhr){
            $('.headphoto').attr('src',data[0].tupian);
        })
        $('.tijiao').click(function(){
            var filename = $("input[type=file]").val();
            var sex = $("input[name=sex]:checked").val();
            var hobby = [];
            $('input[name="hobby"]:checked').each(function(){
                hobby.push($(this).val());//向数组中添加元素
            });
            var password = $('.password').val();
            var age = $('.age').val();
            var name = $('.username').text();
            if(sex==''||hobby==""||password==""||age==""||name==""||filename==""){
                alert('请填写所有数据')
            }else{
                var data={
                    name:name,
                    sex : sex,
                    hobby : hobby,
                    password:password,
                    age:age,
                }
                $.post("http://127.0.0.1:3000/jilu",data,function(data, textStatus, xhr){
                    console.log(data);
                })
                $('.abc').click();
            }

        })

    })
</script>
</html>